.root {
  [data-slot="title-row"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
  }

  [data-slot="usage"] {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-4);

    @media (max-width: 40rem) {
      flex-direction: column;
      gap: var(--space-4);
    }
  }

  [data-slot="usage-item"] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  [data-slot="usage-header"] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  [data-slot="usage-label"] {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-text);
  }

  [data-slot="usage-value"] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  [data-slot="progress"] {
    height: 8px;
    background-color: var(--color-bg-surface);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
  }

  [data-slot="progress-bar"] {
    height: 100%;
    background-color: var(--color-accent);
    border-radius: var(--border-radius-sm);
    transition: width 0.3s ease;
  }

  [data-slot="reset-time"] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  [data-slot="setting-row"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);

    p {
      font-size: var(--font-size-sm);
      line-height: 1.5;
      color: var(--color-text-secondary);
      margin: 0;
    }
  }

  [data-slot="toggle-label"] {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 1.5rem;
    cursor: pointer;
    flex-shrink: 0;

    input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    span {
      position: absolute;
      inset: 0;
      background-color: #ccc;
      border: 1px solid #bbb;
      border-radius: 1.5rem;
      transition: all 0.3s ease;
      cursor: pointer;

      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0.125rem;
        width: 1.25rem;
        height: 1.25rem;
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 50%;
        transform: translateY(-50%);
        transition: all 0.3s ease;
      }
    }

    input:checked + span {
      background-color: #21ad0e;
      border-color: #148605;

      &::before {
        transform: translateX(1rem) translateY(-50%);
      }
    }

    &:hover span {
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
    }

    input:checked:hover + span {
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
    }

    &:has(input:disabled) {
      cursor: not-allowed;
    }

    input:disabled + span {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  [data-slot="beta-notice"] {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background-color: var(--color-bg-surface);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-top: var(--space-3);

    a {
      color: var(--color-accent);
      text-decoration: none;
    }
  }

  [data-slot="other-message"] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
  }

  [data-slot="promo-description"] {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-top: var(--space-2);

    strong {
      color: var(--color-text);
      font-weight: 600;
    }
  }

  [data-slot="promo-models-title"] {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin-top: var(--space-4);
  }

  [data-slot="promo-models"] {
    margin: var(--space-2) 0 0 var(--space-4);
    padding: 0;
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    line-height: 1.4;
  }

  [data-slot="subscribe-actions"] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
  }

  [data-slot="subscribe-button"] {
    align-self: stretch;
  }

  [data-slot="other-methods"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
  }

  [data-slot="other-methods-icons"] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  [data-slot="modal-actions"] {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);

    button {
      flex: 1;
    }
  }

  [data-slot="method-button"] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    height: 48px;
  }
}